<template>
  <div>
    <MyHeader title="购物车案例" backgroundColor="green" color="yellow"></MyHeader>
    <div class="top"></div>
    <MyGoods v-for="obj in list" :key="obj.id" :MyGoodsObj="obj"></MyGoods>
    <div class="bottom"></div>
    <MyFooter :arr="list"></MyFooter>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue';
import MyGoods from './components/MyGoods.vue';
import MyFooter from './components/MyFooter.vue';

export default {
    components: { MyHeader, MyGoods, MyFooter },
    data(){
      return {
        list:[]
      }
    },
    created(){
      this.$axios({
        url: '/api/cart'
      }).then(res => {
        console.log(res)
        this.list = res.data.list
      })
    },

}
</script>

<style scoped>
  .top{
    width: 100%;
    height:50px
  }
  .bottom{
    width:100%;
    height:50px
  }
</style>